<!DOCTYPE html>
<html> 
<head>
	<meta charset="utf-8">
	<title>表样式1</title>
	<!-- <link rel="stylesheet" rel="样式表一.css" > -->
	<style>
		* {
			margin: 0px;
			padding: 0px;
		}
		.box_all {
			margin: 25px;
		}

		.box_head {
			height: 100px;
			background-color: #4CAF50;
			border-radius: 10px;
		}
 
		.box_Main {
			height: 300px;
			margin-top: 10px;
			margin-bottom: 7px;
		}

		.box_center_left {
			width: 225px ;
			height: 300px;
			float: left;
			
			}

		.box_center_center {
			height: 300px;
			display: inline-block;
			margin-left: 15px;
			margin-right: 15px;

		}

		.box_center_right {
			width: 190px ;
			height: 300px;
			background-color: #32a4e7;
			float: right;
			border-radius: 5px;
		}

		.box_footer {
			border: 1px solid #d4d4d4;
			background-color: #f1f1f1;
			margin-top: 30px;
			border-radius: 5px;
		}

		.button {
			width: 189px;
			height: 30px;
			margin-bottom: 3px;
			border-radius: 5px;
			border-style: thin;
		}

		.button a {
			text-decoration: none;
		}

		#head_text {
			color: white;
			font-family: Arial;
			padding: 15px;
		}

		#center_center_text {
			font-family: Arial;
			font-size: normal;
		}

		#center_right_text {
			font-family: Arial;
			font-size: normal;
			color: white;
			padding: 10px;
		}
		
		#footer_text {
			align: center;
			font-family: Arial;
			font-size: 11px;

			padding-top: 10px;
		}

		.box_center_center a:link {
			color: blue;
		}

		.box_center_center a:visited {
			color: black;
		}

		.box_center_center a:hover {
			color: blue;
		}

		.box_center_center a:active {
			color: red;
		}

	</style>
</head>
<body>
	<div class="box_all">
		<div class="box_head" id="head_text">
			<h1>欢迎访问我的首页</h1>
			<h4>请使用菜单来选择不同的样式表</h4>
		</div>

		<div class="box_Main"> 
			<div class="box_center_left">
				<button class="button">
					<a href="样式表1.html">样式表一</a>
				</button> <br>
				<button class="button">
					<a href="样式表2.html">样式表二</a>
				</button> <br>
				<button class="button">
					<a href="#">样式表三</a>
				</button> <br>
				<button class="button">
					<a href="#">样式表四</a>
				</button> <br>
				<button class="button">
					<a href="无样式表.html">无样式表</a>
				</button> <br>
			</div>

			<div class="box_center_center" id="center_center_text">
				<h1>相同页面不同的样式表</h1>
				<p>这是不同样式表如何更改HTML页面布局的演示。您可以通过在菜单中选择不同的样式表或选择以下链接之一来更改此页面的布局：
				</p>
				<a href="样式表1.html" >样式表1</a>
				<a href="#" >样式表2</a>
				<a href="#" >样式表3</a>
				<a href="#" >样式表4</a>
				
				<h2>无样式</h2>
				<p>此页面使用 div 元素对 HTML 页面的不同部分进行分组。单击此处查看没有样式表的页面的外观：
				</p>
				<a href="无样式表.html" >无样式表</a>
			</div>
			
			<div class="box_center_right" id="center_right_text">
				<h3>侧栏</h3>
				<p>侧边栏其实就是一种比较经典的网站导航设计，它的形式通常为竖向的一列，展示在网站的右侧或者左侧，具体的位置当然是取决于整体的设计。
				</p>
			</div>

		</div>
		
		<div class="box_footer" id="footer_text">
			<p align="center"> 网站的页脚是位于每个页面底部的内容区域，在主内容的下面。
			</p>
			<p align="center"> 术语“页脚”来自于印刷，其中页脚是贯穿文档所有页面的一致性设计元素。
			</p>
		</div>
	</div>
</body>
</html>
